<template>
  <div ref="containerRef" class="custom-table-container">
    <el-table
      v-loading="listLoading"
      :border="border"
      :data="list"
      :height="height"
      :stripe="stripe"
    >
      <!--  TODO element-plus未知原因不支持拖拽后宽度重新计算，暂时放弃 -->
      <el-table-column
        v-for="(item, index) in finallyColumns"
        :key="index"
        align="center"
        :label="item.label"
        min-width="110"
        :prop="item.prop"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        width="auto"
      >
        <template #default="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" fixed="right" label="操作" width="150">
        <template #default="{ row }">
          <el-button
            class="but_text"
            text
            type="primary"
            @click="handleDetail(row)"
          >
            查看客服
          </el-button>
          <el-button
            class="but_text"
            style="margin-left: 10px !important"
            text
            type="primary"
            @click="handleDepartment(row)"
          >
            查看部门
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty class="vab-data-empty" description="暂无数据" />
      </template>
    </el-table>
  </div>
</template>

<script>
  import { getWeCorpList } from '@/api/enterpriseWeChat/weCom'
  import { Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'WechatCorp',
    setup() {
      const router = useRouter()
      const $baseTableHeight = inject('$baseTableHeight')
      const state = reactive({
        value: '1',
        border: true,
        height: $baseTableHeight(1),
        stripe: false,
        columns: [
          {
            label: '企业ID',
            prop: 'corp_id',
          },
          {
            label: '企业名称',
            prop: 'corp_name',
          },
          {
            label: '企业规模',
            prop: 'corp_scale',
          },
          {
            label: '企业类别',
            prop: 'corp_sub_industry',
          },
          {
            label: '授权应用ID',
            prop: 'agentid',
          },
          {
            label: '授权应用名称',
            prop: 'name',
          },
          {
            label: '授权用户ID',
            prop: 'userid',
          },
          {
            label: '授权时间',
            prop: 'created_at',
            sortable: true,
          },
          {
            label: '更新时间',
            prop: 'updated_at',
            sortable: true,
          },
        ],
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          page_size: 10,
        },
      })
      const finallyColumns = computed(() => {
        return state.columns
      })
      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list, total },
        } = await getWeCorpList()
        state.list = list
        state.total = total
        state.listLoading = false
      }
      const imageFun = (row) => {
        const list = []
        list.push(row.background_img)
        return list
      }
      const queryData = () => {
        fetchData()
      }
      const handleDetail = (row) => {
        if (row.corp_id) {
          router.push({
            path: '/enterpriseWeChat/customer',
            query: { corp_id: row.corp_id, corp_name: row.corp_name },
          })
        }
      }
      const handleDepartment = (row) => {
        if (row.corp_id) {
          router.push({
            path: '/enterpriseWeChat/department',
            query: { corp_id: row.corp_id, corp_name: row.corp_name },
          })
        }
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        finallyColumns,
        queryData,
        fetchData,
        imageFun,
        handleDetail,
        handleDepartment,
        Plus,
        Search,
      }
    },
  })
</script>
<style lang="scss" scoped>
  :deep() {
    .el-button {
      margin-left: 0 !important;
    }
  }
</style>
